<template>
  <div>
    <div>
      <router-view />

      <van-tabbar v-model="selected">
        <van-tabbar-item
          v-for="item in tabbarItems"
          :key="item.name"
          :name="item.name"
          replace
          :to="item.to"
          :icon="item.icon"
        >
          {{ item.text }}
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  mixins: [],

  data() {
    return {
      tabbarItems: [
        {
          name: 'home',
          text: 'Home',
          to: '/home/home',
          icon: 'wap-home-o'
        },

        {
          name: 'message',
          text: 'Message',
          to: '/home/message',
          icon: 'chat-o'
        },

        { name: 'me', text: 'Me', to: '/home/me', icon: 'user-o' }
      ]
    }
  },
  computed: {
    selected: {
      get() {
        return this.tabbarItems
          .filter(item => item.to === this.$route.path)
          .map(item => item.name)
          .join('')
      },
      set(val) {
        //
      }
    }
  },
  async created() {
    //
    // console.log('xxxx, ', this.$router)
    // const { tabItem } = this.$route.query
    // if (tabItem) {
    //   this.selected = tabItem
    // }
  },

  methods: {
    //
  }
}
</script>

<style type="text/css"></style>
